﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../../static_files/bootstrap-table/bootstrap.min.css" rel="stylesheet">
    <link href="../../static_files/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="../../static_files/stylesheet/font-awesome.min.css" rel="stylesheet">
    <link href="../../static_files/stylesheet/default.css" rel="stylesheet" />

    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../static_files/JavaScript/jquery.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="../../static_files/JavaScript/build.js"></script>
</head>
<body>
    <div class="container">
        <!-- 按钮：用于打开模态框 -->
        <!-- 模态框 -->
    </div>
    <table id="list_table"></table>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" style="">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title"> 安全日志</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">
                            安全日志信息
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="logId" class="col-sm-2 col-form-label text-center">日志编号：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="logId">
                                </div>
                                <label for="inputer" class="col-sm-2 col-form-label text-center">填写人：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="inputer">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="programName" class="col-sm-2 col-form-label text-center">项目名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="programName">
                                </div>
                                <label for="attendance" class="col-sm-2 col-form-label text-center">出勤人数：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="attendance">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="department" class="col-sm-2 col-form-label text-center">部门：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="department">
                                </div>
                                <label for="temperature" class="col-sm-2 col-form-label text-center">温度：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="temperature">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="date" class="col-sm-2 col-form-label text-center">日期：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="date">
                                </div>
                                <label for="position" class="col-sm-2 col-form-label text-center">施工部位：</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="position">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="staticEmail" class="col-sm-2 col-form-label text-center">备注：</label>
                                <div class="col-sm-4">
                                    <textarea style='height: 39px;width:100%'></textarea>
                                </div>
                                <label for="inputPassword" class="col-sm-2 col-form-label text-center">附件：</label>
                                <div class="col-sm-4">
                                    <div class="custom-file"><input type="file" class="custom-file-input" id="customFile" name="filename"><label class="custom-file-label" for="customFile"><i class="fa fa-folder-open-o pull-left" style="font-size:24px"></i></label></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="construction" class="col-sm-2 col-form-label text-center">当日施工安全情况：</label>
                                <div class="col-sm-10">
                                    <textarea style='height: 100px;width:100%'></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="education" class="col-sm-2 col-form-label text-center">安全教育情况：</label>
                                <div class="col-sm-10">
                                    <textarea style='height:70px;width:100%'></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="disclose" class="col-sm-2 col-form-label text-center">安全交底：</label>
                                <div class="col-sm-10">
                                    <textarea style='height:70px;width:100%'></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="check" class="col-sm-2 col-form-label text-center">验收情况记录：</label>
                                <div class="col-sm-10">
                                    <textarea style='height:70px;width:100%'></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="exam" class="col-sm-2 col-form-label text-center">安全检查情况：</label>
                                <div class="col-sm-10">
                                    <textarea style='height:70px;width:100%'></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="meeting" class="col-sm-2 col-form-label text-center">安全会议记录：</label>
                                <div class="col-sm-10">
                                    <textarea style='height:70px;width:100%'></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o addstyle_addpage_white"></i>&nbsp;提交</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>

    <script>
        var jsondata =
            [
                {
                    "ID": "AQ20180905001",
                    "Worker": "张三",
                    "Department": "项目部",
                    "Name": "农房",
                    "Date": "2018-09-05 11:31",
                    "Statue": "完成",
                    "Remark": "",

                },
                {
                    "ID": "AQ20180905002",
                    "Worker": "李四",
                    "Department": "项目部",
                    "Name": "农房",
                    "Date": "2018-09-06 09:31",
                    "Statue": "完成",
                    "Remark": "",


                },

            ]
        var listdata =
            [
                {
                    "ID": 1

                }
            ]

        //初始化bootstrap-table的内容

        //记录页面bootstrap-table全局变量$table，方便应用
        $('#list_table').bootstrapTable({
            //url: queryUrl,                      //请求后台的URL（*）
            //method: 'GET',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            /* pageSize: rows,         */            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search:true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order //排位命令（desc，asc）
                };
                return temp;
            },
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框
            },
            {
                field: 'ID',
                title: '安全日志编号',
                sortable: true
            }, {
                field: 'Worker',
                title: '填写人',
                sortable: true
            }, {
                field: 'Department',
                title: '部门',
                sortable: true
            }, {
                field: 'Name',
                title: '项目名称',
                sortable: true
            },
            {
                field: 'Date',
                title: '日期',
                sortable: true
            }, {
                    field: 'Statue',
                    title: '审批状态',
                    sortable: true
            }, {
                    field: 'Remark',
                    title: '备注',
                    sortable: true
            },{
                field: 'Operate',
                title: '操作',
                align: 'center',
                width: 140,
                //events:operateEvents,
                formatter: actionFormatter,
            },],
            data: jsondata,
            onLoadSuccess: function () {
                //alert('abc');
            },
            onPostHeader: function () {

            },
            onPostBody: function () {
                //alert('body');
            }
           
        });
        $('.columns-right').append('&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100px"><i class="fa fa-plus-square addstyle_addpage_white"></i>&nbsp;添加</button >&nbsp;<button type="button" class="btn btn-primary" style="width:100px"><i class="fa fa-close addstyle_addpage_white"></i>&nbsp;删除</button >&nbsp;&nbsp;');
        //操作栏的格式化
        function actionFormatter(value, row, index) {
            return [
                '<button type="button" class="RoleOfdelete btn btn-primary btn-sm" style="margin-right:15px;"data-toggle="modal" data-target="#myModal" >详情</button>',
                '<button type="button" class="RoleOfedit btn btn-primary btn-sm" style="margin-right:15px;" data-toggle="modal" data-target="#myModal">修改</button>'
            ].join('');
        }
    </script>
</body>

</html>